<template>
  <div>
    <el-dialog  :visible.sync="previewDialog" :width="dialogWidth">
<!--      <detail style="margin-left: 3.5%" :catalog="dataForm.details"></detail>-->
       <img  :src="dataForm.details" alt="" @load="onLoad">
    </el-dialog>

  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="商品名称" prop="courseTitle">
      <el-input v-model="dataForm.courseTitle" placeholder="商品名称"></el-input>
    </el-form-item>
<!--      <el-form-item label="教师" prop="teacherId">-->
<!--&lt;!&ndash;        <el-input v-model="dataForm.teacherId" placeholder="教师的id"></el-input>&ndash;&gt;-->
<!--        <el-select v-model="dataForm.teacherId" placeholder="请选择"  style="width: 300px">-->
<!--          <el-option-->
<!--            v-for="item in teacherList"-->
<!--            :key="item.id"-->
<!--            :label="`id:`+item.id+`    用户名:`+item.username"-->
<!--            :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--    <el-form-item label="价格" prop="orginalPrice">-->
<!--      <el-input v-model="dataForm.orginalPrice" placeholder="课程原价，六位数，两位小数"></el-input>-->
<!--    </el-form-item>-->
      <el-form-item label="数量" prop="count">
      <el-input v-model="dataForm.count" placeholder="商品数量"></el-input>
    </el-form-item>

    <el-form-item label="商品现价" prop="currentPrice">
      <el-input v-model="dataForm.currentPrice" placeholder="所需的🦌币"></el-input>
    </el-form-item>
      <el-form-item label="商品封面" prop="coverUrl">
        <single-upload
          :img="dataForm.coverUrl"
          @uploadSuccess="updateImg"
        ></single-upload>
      </el-form-item>
    <el-form-item label="商品详情(长图)" prop="details">
      <single-upload
        :img="dataForm.details"
        @uploadSuccess="updateDetails"
      ></single-upload>
      <el-button type="primary" @click="handlePreview">预览</el-button>

    </el-form-item>
    <!-- <el-form-item label="课程开始时间" prop="beginTime">
      <el-input v-model="dataForm.beginTime" placeholder="课程开始时间"></el-input>
    </el-form-item> -->
<!--    <el-form-item label="课程开始时间" prop="beginTime">-->
<!--        <el-date-picker-->
<!--          v-model="dataForm.beginTime"-->
<!--          type="date"-->
<!--          placeholder="选择日期"-->
<!--          format="yyyy 年 MM 月 dd 日"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          >-->
<!--        </el-date-picker>-->
<!--    </el-form-item>-->



<!--    <el-form-item label="封面预览" prop="coverUrl">-->
<!--      <div class="block">-->
<!--        <el-image :src="dataForm.coverUrl" height=200px></el-image>-->
<!--      </div>-->
<!--    </el-form-item>-->

<!--    <el-form-item label="教师抽成比例" prop="commisionPercent" >-->
<!--      <el-input v-model="dataForm.commisionPercent" placeholder="教师抽成比例"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="学生积分比例" prop="pointPercent">-->
<!--      <el-input v-model="dataForm.pointPercent" placeholder="学生积分比例"></el-input>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="逻辑删除位【0删除，1存在】" prop="showStatus">
      <el-input v-model="dataForm.showStatus" placeholder="逻辑删除位【0删除，1存在】"></el-input>
    </el-form-item>-->
    <!--
    <el-form-item label="更新时间" prop="updateTime">
      <el-input v-model="dataForm.updateTime" placeholder="更新时间"></el-input>
    </el-form-item> -->
<!--    <el-form-item label="是否公开，【0不公开，1公开】" prop="isPublic">
      <el-input v-model="dataForm.isPublic" placeholder="是否公开，【0不公开，1公开】"></el-input>
    </el-form-item>-->
<!--      <el-form-item label="创建时间" >-->
<!--        <el-input :disabled="true" v-model="dataForm.createTime" placeholder="创建时间"></el-input>-->
<!--      </el-form-item>-->
    <el-form-item label="是否公开" prop="isPublic">
      <el-radio-group v-model="dataForm.isPublic">
        <el-radio :label="0">不公开</el-radio>
        <el-radio :label="1">公开</el-radio>
      </el-radio-group>
    </el-form-item>

<!--    <el-form-item label="课程视频的地址，如果有多个用'\n'隔开" prop="videoUrl">-->
<!--      <el-input v-model="dataForm.videoUrl" placeholder="课程视频的地址，如果有多个用'\n'隔开"></el-input>-->
<!--    </el-form-item>-->
    <!-- <el-form-item label="课程分类" prop="courseType">
      <el-input v-model="dataForm.courseType" placeholder="课程分类"></el-input>
    </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog></div>
</template>

<script>
import SingleUpload from '../../../components/upload/singleUpload'
import Detail from '../../../components/detail'

  export default {
    components: {Detail, SingleUpload},
    data () {
       const setPrice = (rule, value, callback) => {

         var regPos = /^(([1-9]\d*)(\.\d+)?)$|^0\.\d*[1-9]$|^0$/; //非负浮点数
         if(value < 0){
            return callback(new Error("价格不能小于0"))
         }else if(!regPos.test(value)){
           return callback(new Error("价格不能为非数字类型"))
         }
         else{
           return callback()
         }
    };
      const setPercent = (rule, value, callback) => {


        if(value >100){
          return callback(new Error("比例不能大于100"))
        }
        else{
          return callback()
        }
      };
      return {
        dialogWidth:0,
        visible: false,
        previewDialog:false,
        dataForm: {

          id: 0,
          courseTitle: '',
          orginalPrice: '',
          details: '',
          beginTime: '',
          teacherId: '',
          coverUrl: '',
          currentPrice: '',
          commisionPercent: '',
          pointPercent: '',
          showStatus: '',
          createTime: '',
          updateTime: '',
          isPublic: '',
          videoUrl: '',
          courseType: '',
          count:''
        },
        dataRule: {
          courseTitle: [
            { required: true, message: '商品名字不能为空', trigger: 'blur' }
          ],
          orginalPrice: [
            { required: true, message: '商品价格不能为空', trigger: 'blur' },
            // { min: 0.01,max:2, message: '原价不能低于0.01',trigger: 'change' }
            {validator:setPrice,trigger: 'blur' }
          ],
          details: [
            { required: true, message: '商品介绍不能为空', trigger: 'blur' }
          ],
          beginTime: [
            { required: true, message: '课程开始时间不能为空', trigger: 'blur' }
          ],
          // count: [
          //   { required: true, message: '商品数量不能为空', trigger: 'blur' },
          //   {validator:setPrice,trigger: 'blur' }
          // ],
          coverUrl: [
            { required: true, message: '封面url不能为空', trigger: 'blur' }
          ],
          currentPrice: [
            { required: true, message: '课程现价不能为空', trigger: 'blur' },
            {validator:setPrice,trigger: 'blur' }
          ],
          commisionPercent: [
            { required: true, message: '教师返还比例，默认0不能为空', trigger: 'blur' },
            {validator:setPrice,trigger: 'blur' },
            {validator:setPercent,trigger: 'blur' }
          ],
          pointPercent: [
            { required: true, message: '学生购买后赠送的积分比例不能为空', trigger: 'blur' },
            {validator:setPrice,trigger: 'blur' },
            {validator:setPercent,trigger: 'blur' }
          ],
          showStatus: [
            { required: true, message: '逻辑删除位【0删除，1存在】不能为空', trigger: 'blur' }
          ],
          // createTime: [
          //   { required: true, message: '创建时间不能为空', trigger: 'blur' }
          // ],
          updateTime: [
            { required: true, message: '更新时间不能为空', trigger: 'blur' }
          ],
          // isPublic: [
          //   { required: true, message: '是否公开，【0不公开，1公开】不能为空', trigger: 'blur' }
          // ],
          videoUrl: [
            { required: true, message: '课程视频的地址，如果有多个用`\n`隔开不能为空', trigger: 'blur' }
          ],
          courseType: [
            { required: true, message: '课程分类不能为空', trigger: 'blur' }
          ]
        },
        teacherList:{
          type:Object
        }
      }

    },
    methods: {
      onLoad(e){
        const img = e.target;
        let width = 0;
        if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
          width = img.width + 40;
        }
        this.dialogWidth = width + 'px';
      },
      handlePreview () {
        this.previewDialog=true;
      },
      updateImg (imgUrl){
        this.dataForm.coverUrl=imgUrl;
      },
      updateDetails(imgUrl){
        this.dataForm.details=imgUrl;
      },
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/mall/mallproduct/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                // data=JSON.parse(JSON.stringify(data))
                console.log(data)
                console.log(data.mallProduct)

                this.dataForm.count = data.mallProduct.count
                this.dataForm.courseTitle = data.mallProduct.name
                this.dataForm.details = data.mallProduct.details
                this.dataForm.coverUrl = data.mallProduct.pics
                this.dataForm.currentPrice = data.mallProduct.price
                this.dataForm.isPublic = data.mallProduct.isPublic

              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.dataForm.showStatus = 1
            this.$http({
              url: this.$http.adornUrl(`/mall/mallproduct/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'name': this.dataForm.courseTitle,
                'details': this.dataForm.details,
                'pics': this.dataForm.coverUrl,
                'price': this.dataForm.currentPrice,
                'showStatus': 1,
                'isPublic': this.dataForm.isPublic,
                'count':this.dataForm.count
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },


      getTeacherList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/course/course/getTeacherInfo'),
          method: 'get',
          params: this.$http.adornParams({

          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.teacherList=data.teacherList
            console.log(this.teacherList)
          } else {
            this.teacherList=null

          }
          this.dataListLoading = false
        })
      },
    },
    mounted () {
      this.getTeacherList()
    }
  }
</script>
